<template>
  <section class="container">
    <div class="talent-top-box">
      <div class="top-bg">
        <img src="../../assets/images/rc-bg.png" alt="">
      </div>
    </div>
    <div class="top-img-box">
      <div class="top-img">
        <img src="../../assets/images/talent-top-img.png" alt="">
      </div>
    </div>
    <div class="talent-center-box">
      <div class="talent-content">
        <div class="navigation-bar">
          <div class="navigation-one-box">
            <div class="left-column-one">
              人才招聘
            </div>
            <div class="left-column-two">
              Talent Acquisition
            </div>
          </div>
          <div class="navigation-two-box">
            <template 
              v-for="recruit in recruitTemp.recruitList"
              :key="recruit.id">
              <div
                class="center-column"
                :class="{'activity-css': recruit.isActive}"
                @click="recruitTemp.getRecruit(recruit.id)">{{ recruit.title }}</div>
            </template>
          </div>
          <div class="navigation-three-box">
            <input placeholder="请输入您应聘岗位" class="input-box"/>
            <div class="search-btn">
              <div class="font">搜索</div>
              <div class="icon">
                <svg-icon name="search1" size=".8em"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="temp-font">
      <div class="font">
        我们需要这样的人才...
      </div>
    </div>
    <recruit-temp/>
    <recruit-temp/>
    <button @click="recruitTemp.getRecruit()">按钮</button>
  </section>
</template>

<script lang="ts">
import {defineComponent, reactive} from 'vue';
  import { getApp } from '@/common/hooks';
  import { Language } from '@/common/lang';
  import RecruitTemp from '@/components/RecruitTemp/index.vue';
  export default defineComponent({
    name: "recruit",
    components: {
      RecruitTemp
    } as any,
    data() {
      return {
      }
    },
    setup() {
      const recruitTemp = reactive({
        recruitList: [
          { id: 1,
            title: '全部',
            isActive: true
          },
          { id: 2,
            title: '设计师',
            isActive: false
          },
          { id: 3,
            title: '服装助理',
            isActive: false
          },
          { id: 4,
            title: '穿搭博主',
            isActive: false
          },
          { id: 5,
            title: '服装销售',
            isActive: false
          },
          { id: 6,
            title: '服装助播',
            isActive: false
          },
          ],
        getRecruit: async function (id){
          recruitTemp.recruitList.map(item => {
            item.isActive = false
          })
          recruitTemp.recruitList[id-1].isActive = true
         await getApp().System.Recruit?.getRecruitData().then((res) => {
           console.log('Recruit', res)
         })
        }
      })
      const { proxy } = getApp(["Vm"]).Vm;

      const C = () => {
        proxy.$i18n.locale = Language.xiaomaoen;
      }

      return {
        C,
        recruitTemp
      }
    }
  });
</script>

<style lang="scss" scoped>
.container {
  background-color: #F2F2F2;;
  .talent-top-box {
    background-color: #93d4fa;
    //margin-bottom: 463Px;
    .top-bg {
      width: 100%;
      margin-top: 80Px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .top-img-box {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: -360Px;
    .top-img {
      width: 1480Px;
      height: 720Px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .talent-center-box {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 115Px;
    margin-bottom: 30Px;
    .talent-content {
      width: 1480Px;
      height: 112Px;
      .navigation-bar {
        display: flex;
        justify-content: space-between;
        height: 100%;
        .navigation-one-box {
          flex: 0 1 419Px;
          height: 100%;
          .left-column-one {
            width: 225Px;
            height: 54Px;
            padding-bottom: 21Px;
            line-height: 54Px;
            font-size: 54Px;
            font-style: normal;
            font-weight: 400;
            color: #222;
          }
          .left-column-two {
            width: 211Px;
            height: 30Px;
            font-size: 20Px;
            font-style: normal;
            font-weight: 400;
            line-height: 24Px;
            text-transform: uppercase;
            border-bottom: 2px solid #222;
          }
        }
        .navigation-two-box {
          flex: 0 1 711Px;
          display: flex;
          justify-content: space-between;
          height: 100%;
          .center-column {
            margin-right: 30Px;
            line-height: 54Px;
            color: #999;
            font-size: 18Px;
            font-style: normal;
            font-weight: 400;
            &:hover {
              cursor: pointer;
            }
          }
        }
        .navigation-three-box {
          flex: 1;
          display: flex;
          .input-box {
            width: 240Px;
            height: 50Px;
            border-radius: 30Px;
            padding-left: 20Px;
            border: none;
            font-size: 18Px;
            color: #999;
            font-style: normal;
            font-weight: 400;
          }
          .search-btn {
            display: flex;
            justify-content: center;
            width: 142Px;
            height: 54Px;
            line-height: 54Px;
            font-size: 18Px;
            color: white;
            text-align: center;
            background-color: #000;
            border-radius: 30Px;
            .font {
              margin-right: 10Px;
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
  .temp-font {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 28Px;
    .font {
      width: 1480Px;
      height: 50Px;
      line-height: 50Px;
      color: #222;
      font-size: 20Px;
      font-style: normal;
      font-weight: 600;
    }
  }
}
.activity-css {
  color: #222 !important;
}
</style>
